@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* font-family: 'Roboto Condensed', sans-serif; */
/* font-family: 'Poppins', sans-serif; */

/* box-shadow:3px 3px 26px rgba(7,86,165,0.24); */

:root{
    --black : #333;
    --dark-blue : #0756A5;
    --blue : linear-gradient(180deg, #027DF9 0%, #0756A5 100%);
    --white : #fff;
    --poppins : 'Poppins', sans-serif;
    --roboto : 'Roboto Condensed', sans-serif;
}

html {
    scroll-behavior: smooth!important;
}

.blue-gradient-text{
    background: var(--blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dw-heading{
    font-size: 48px;
    font-weight: 700;
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 40px;
    text-align: center;
}

.thin-hr-line{
    width: 80%;
    margin: 0 auto;
    background: linear-gradient(180deg, #027DF9 0%, #0756A5 100%);
    height: 1px;
    border-top: 0;
    border-radius: 30px;
    opacity: 0.44;
}


  /* <!-- ========== DIGITAL WALLETS PAGE CSS STARTED========== --> */

/* <!-- ========== DIGITAL WALLETS BANNER SECTION CSS ========== --> */
.dw-hero-section{
    padding-top:127px;
}
.dw-hero-section .dw-hero-inner-section{
    background: url(../images/dw-hero-bg.webp);
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
}

.dw-row{
    display: flex;
    align-items: center;
    gap: 15px;
}

.dw-row .dw-left-col{
    max-width: 476px;
    width: 100%;
}

.dw-hero-section .content{
    padding: 100px 0 90px 0;
}
.dw-hero-section .content h1{
    font-size:40px;
    font-weight:700;
    margin-bottom:30px;
    line-height: 47px;
    color: var(--dark-blue);
    font-family: 'Roboto Condensed', sans-serif;
}
.dw-hero-section .content p{
    font-size:16px;
    line-height: 24px;
    font-weight:400;
    color: var(--black);
    margin-bottom:40px;
    font-family: 'Poppins', sans-serif;
}

.dw-hero-section .content a{
    font-size: 24px;
    font-weight: 400;
    color: var(--white);
    padding: 15px 50px;
    background: linear-gradient(270deg, #F50 2.12%, #FF7530 96.18%);
    border-radius: 60px;
    cursor: pointer;
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;

}
.dw-hero-section .content a:hover{
    transform: translateY(-8px);
    transition: all 0.3s ease-in-out;
}

.dw-hero-section .image-wrapper{
    text-align: center;
    margin-bottom: 30px;
}

.dw-hero-section img{
    max-width: 100%;
}

/* <!-- ========== DIGITAL WALLETS WHY SECTION CSS ========== --> */

.dw-why-section{
    padding: 100px 0;
    background-color: var(--white);
}

.dw-why-content{
    max-width: 970px;
    width: 100%;
    margin: 0 auto;
}

.dw-why-section .dw-heading{
    margin-bottom: 25px;
}

.dw-why-para{
    font-size: 18px;
    font-weight: 400;
    font-family: var(--poppins);
    color: var(--black);
    line-height: 28px;
    text-align: center;
}


/* <!-- ========== DIGITAL WALLETS DONATION SECTION CSS ========== --> */
.dw-donation-section{
    background: rgba(239, 244, 249, 1);
    padding: 90px 0 0 0;
}

.dw-donation-section .dw-donation-row{
    margin: 40px 0;
    align-items: center;
}

.dw-donation-section h2.dw-heading{
    margin-bottom: 30px;
}

.dw-donation-section .image-wrapper{
    width: 100%;
    text-align: center;
}

.dw-donation-section .image-wrapper img{
    max-width: 100%;
}

.dw-donation-section .content-wrapper{
    max-width: 432px;
    width: 100%;
}

.dw-donation-section .content-wrapper .dw-heading{
    text-align: left;
}

.dw-donation-section .content-wrapper li{
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 32px;
}

.dw-donation-section .content-wrapper li:last-child{
    margin-bottom: 10px;
}

.dw-donation-section .content-wrapper li img{
    height: 31px;
    width: 31px;
    margin-top: 2px;
}

.dw-donation-section .content-wrapper li span{
    font-size: 16px;
    color: var(--black);
    line-height: 33px;
}



/* <!-- ========== DIGITAL WALLETS SECTION CSS ========== --> */


.dw-wallet-section{
    padding: 80px 0;
}

.dw-wallet-section .row{
    align-items: center;
}
.dw-wallet-section.white-bg{
    background: var(--white)
}
.dw-wallet-section.sky-blue-bg{
    background: rgba(239, 244, 249, 1);
}


.dw-wallet-section .image-wrapper{
    width: 100%;
    text-align: center;
}

.dw-wallet-section .image-wrapper img{
    max-width: 100%;
}

.dw-wallet-section .content-wrapper{
    max-width: 432px;
    width: 100%;
}

.dw-wallet-section .content-wrapper .dw-heading{
    text-align: left;
}

.dw-wallet-section .content-wrapper li{
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 32px;
}

.dw-wallet-section .content-wrapper li:last-child{
    margin-bottom: 10px;
}

.dw-wallet-section .content-wrapper li img{
    height: 31px;
    width: 31px;
    margin-top: 2px;
}

.dw-wallet-section .content-wrapper li span{
    font-size: 16px;
    color: var(--black);
    line-height: 33px;
}



/* <!-- ========== DIGITAL WALLETS BENEFITS SECTION CSS ========== --> */

.dw-benefits-section{
    padding: 100px 0;
    background-color: var(--white);
}

.dw-benefits-section .dw-heading{
    margin-bottom: 25px;
}

.dw-benefits-card-wrapper{
    margin-top: 50px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 70px;
    flex-wrap: wrap;
}

.dw-benefits-card{
    display: flex;
    align-items: start;
    gap: 20px;
}

.dw-card-image-wrapper{
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 10px;
    background-color: var(--white);
}

.dw-card-content{
    max-width: 310px;
    width: 100%;
}

.dw-card-title{
    font-size: 24px;
    font-weight: 700;
    font-family: var(--roboto);
    color: var(--dark-blue);
    line-height: 26px;
    text-align: left;
    margin-bottom: 20px;
}

.dw-card-para{
    font-size: 16px;
    font-weight: 400;
    font-family: var(--poppins);
    color: var(--black);
    line-height: 24px;
    text-align: left;
}


/* <!-- ========== DIGITAL WALLETS DEVICE SECTION CSS ========== --> */

.dw-device-section{
    padding: 100px 0;
    background-color: #021021;
}

.dw-device-section .dw-heading{
    color: var(--white);
    margin-bottom:25px;
}

.dw-device-section .thin-hr-line{
    background: var(--white);
}

.dw-device-top-para{
    max-width: 921px;
    margin: 45px auto 55px auto;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    font-family: var(--poppins);
    color: var(--white);
    line-height: 40px;
}

.dw-device-bottom-para{
    max-width: 921px;
    margin: 40px auto 0px auto;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    font-family: var(--poppins);
    color: var(--white);
    line-height: 40px;
}

.dw-device-section table{
    border-radius: 10px;
    background-color: var(--white);
}

.dw-device-section thead{
    background-color: rgba(7, 86, 165, 0.2);
}

.dw-device-section thead th{
    font-size: 32px;
    font-weight: 700;
    font-family: var(--roboto);
    color: var(--dark-blue);
    line-height: 32px; 
    padding: 27px 15px 15px 45px;
    width: 33.3%;
    text-align: left;
}

.dw-device-section tbody tr{
    border-bottom: 3px solid rgba(217, 217, 217, 0.2);
}

.dw-device-section tbody tr td{
    padding: 25px 15px 25px 45px;
    font-size: 24px;
    font-weight: 400;
    font-family: var(--poppins);
    color: var(--black);
    line-height: 26px; 
    text-align: left;
}


/* <!-- ========== DIGITAL WALLETS SUPPORT SECTION CSS ========== --> */

.dw-support-section{
    background-color: var(--white);
}

.dw-support-row{
    display: flex;
    align-items: end;
}

.dw-support-row .left-col{
    flex-basis: 52%;
    padding: 100px 0 85px 0;
}

.dw-support-row .right-col{
    flex-basis: 48%; 
    padding-top: 70px;
}

.dw-support-section .content-wrapper .dw-heading{
    margin-bottom: 20px;
    text-align: left;
}

.dw-support-section .content-wrapper p{
    font-size: 16px;
    font-weight: 400;
    font-family: var(--poppins);
    color: var(--black);
    line-height: 26px; 
}

.dw-support-section .content-wrapper p span{
    display: block;
    margin-top: 10px;
}

.dw-support-section .content-wrapper p a{
    text-decoration: none;
    color: var(--dark-blue);
    background: none;
}



/***************************************************************/
/* <!-- ========== RESPONSIVE MEDIA QUERIES CSS ========== --> */
/***************************************************************/

/* <!-- === RESPONSIVE 1198px STARTS HERE === --> */

@media (max-width:1198px){
    .dw-hero-section .content {
        padding: 70px 0 70px 0;
    }
    .dw-hero-section .content h1 {
        font-size: 38px;
    }
    .dw-why-section {
        padding: 90px 0;
    }
    .dw-benefits-card-wrapper{
        gap: 50px;
    }
    .dw-benefits-card {
        width: calc(50% - 25px);
    }
    .dw-support-row .left-col {
        padding: 90px 0 50px 0;
    }
}


/* <!-- === RESPONSIVE 992PX STARTS HERE === --> */

@media (max-width:992px){
    .dw-hero-section{
        padding-top: 107px;
    }
    .dw-heading{
        font-size: 32px;
        margin-bottom: 25px;
    }

    .dw-hero-section .dw-left-col{
        max-width: unset;
        width: 60%;
    }

    .dw-hero-section .dw-right-col{
        max-width: unset;
        width: 40%;
    }

    .dw-hero-section .content{
        padding: 55px 0 55px 0;
    }

    .dw-hero-section .content h1 {
        font-size: 32px;
        margin-bottom: 15px;
        line-height: 39px;
    }

    .dw-hero-section .content p{
        margin-bottom: 0px;
    }
    .dw-hero-section .content a {
        font-size: 18px;
        padding: 12px 40px;
    }
    .dw-why-section {
        padding: 60px 0;
    }
    .dw-why-para {
        font-size: 16px;
        line-height: 26px;
    }
    .dw-donation-section {
        background: rgba(239, 244, 249, 1);
        padding: 60px 0 0 0;
    }
    .dw-donation-section h2.dw-heading {
        margin-bottom: 25px;
    }
    .dw-donation-section .content-wrapper li{
        margin-bottom: 25px;
    }
    .dw-wallet-section {
        padding: 60px 0;
    }
    .dw-wallet-section .content-wrapper li{
        margin-bottom: 25px;
    }
    .dw-donation-section .content-wrapper li span{
        line-height: 30px;
    }
    .dw-wallet-section .content-wrapper li span{
        line-height: 30px;
    }
    .dw-benefits-section {
        padding: 60px 0;
    }
    .dw-benefits-card-wrapper{
        margin-top: 40px;
        gap: 40px;
    }
    .dw-card-image-wrapper img{
        width: 70px;
        height: 70px;
    }
    .dw-card-title {
        font-size: 20px;
        line-height: 22px;
        margin-bottom: 10px;
    }
    .dw-card-para{
        font-size: 14px;
        line-height: 22px;
    }
    .dw-device-section{
        padding: 70px 0;
    }
    .dw-device-top-para {
        margin: 30px auto 35px auto;
        font-size: 20px;
        line-height: 34px;
    }
    .dw-device-bottom-para {
        margin: 30px auto 0px auto;
        font-size: 20px;
        line-height: 34px;
    }
    .dw-device-section thead th{
        font-size: 24px;
        line-height: 26px;
        padding: 20px 15px 15px 30px;
    }
    .dw-device-section tbody tr td{
        font-size: 18px;
        line-height: 22px;
        padding: 20px 15px 20px 30px;
    }
    .dw-device-section tbody tr td img{
        width: 75%;
    }
    .dw-support-row .right-col .image-wrapper img{
        width: 100%;
        height: auto;
    }
    .dw-support-section .content-wrapper .dw-heading{
        font-size: 28px;
        margin-bottom: 15px;
    }
    .dw-support-section .content-wrapper p {
        font-size: 14px;
        line-height: 24px;
    }
    .dw-support-section .content-wrapper p span{
        margin-top: 5px;
    }
    .dw-support-row .left-col {
        padding: 60px 0 30px 0;
    }
}


/* <!-- === RESPONSIVE ONLY 768px STARTS HERE === --> */

@media (max-width:768px){
    .dw-hero-section {
        padding-top: 0px;
    }
}


/* <!-- === RESPONSIVE ONLY 767px STARTS HERE === --> */

@media (max-width:767px){
    .dw-row{
        flex-direction: column;
    }
    .dw-hero-section .content {
        padding: 40px 0 0px 0;
        text-align: center;
    }
    .dw-hero-section .dw-left-col{
        width: 100%;
    }
    .dw-hero-section .dw-right-col{
        width: 100%;
    }
    .dw-why-section {
        padding: 40px 0;
    }
    .dw-why-section .dw-heading {
        margin-bottom: 15px;
    }
    .dw-donation-section {
        padding: 40px 0 0 0;
    }
    .dw-donation-section h2.dw-heading {
        margin-bottom: 20px;
    }
    .dw-donation-section .dw-donation-row {
        margin: 30px -15px;
        gap: 15px;
        flex-direction: column-reverse;
    }
    .dw-donation-section .content-wrapper{
        max-width: 100%;
    }
    .dw-donation-section .image-wrapper img {
        max-width: unset;
        height: 400px;
        width: auto;
    }
    .dw-wallet-section {
        padding: 40px 0;
    }
    .dw-wallet-section .row{
        gap: 20px;
    }
    .dw-wallet-section .content-wrapper{
        max-width: 100%;
    }
    .dw-wallet-section .image-wrapper img {
        max-width: unset;
        height: 400px;
        width: auto;
    }
    .dw-wallet-section.sky-blue-bg .row{
        flex-direction: column-reverse;
    }
    .dw-wallet-section .content-wrapper li {
        margin-bottom: 20px;
    }
    .dw-donation-section .content-wrapper li {
        margin-bottom: 20px;
    }
    .dw-donation-section .content-wrapper li img {
        height: 28px;
        width: 28px;
    }
    .dw-wallet-section .content-wrapper li img{
        height: 28px;
        width: 28px;
    }
    .dw-donation-section .content-wrapper li:last-child {
        margin-bottom: 0px;
    }
    .dw-wallet-section .content-wrapper li:last-child {
        margin-bottom: 0px;
    }
    .dw-benefits-section {
        padding: 40px 0;
    }
    .dw-benefits-section .dw-heading {
        margin-bottom: 20px;
    }
    .dw-benefits-card-wrapper {
        margin-top: 30px;
        gap: 30px;
    }
    .dw-benefits-card {
        width: 100%;
    }
    .dw-card-content {
        max-width: 100%;
        width: 100%;
    }
    .dw-device-section {
        padding: 50px 0;
    }
    .dw-device-section .dw-heading {
        margin-bottom: 20px;
    }
    .dw-device-top-para {
        margin: 20px auto 20px auto;
        font-size: 16px;
        line-height: 26px;
    }
    .dw-device-bottom-para {
        margin: 20px auto 0px auto;
        font-size: 16px;
        line-height: 26px;
    }
    .dw-device-section thead th {
        font-size: 20px;
        line-height: 22px;
        padding: 15px 10px 15px 20px;
    }
    .dw-device-section tbody tr td {
        font-size: 16px;
        line-height: 21px;
        padding: 15px 10px 15px 20px;
    }
    .dw-support-row{
        flex-direction: column;
    }
    .dw-support-row .left-col {
        padding: 50px 0 30px 0;
    }
    .dw-support-row .right-col {
        padding-top: 0px;
    }
    .dw-support-row .right-col .image-wrapper{
        text-align: center;
    }
    .dw-support-row .right-col .image-wrapper img {
        width: 80%;
    }
    .dw-support-section .content-wrapper .dw-heading {
        text-align: center;
    }
    .dw-support-section .content-wrapper p {
        text-align: center;
    }

}


/* <!-- === RESPONSIVE ONLY 575px STARTS HERE === --> */

@media (max-width:575px){
    .dw-heading{
        font-size: 28px;
    }
    .dw-hero-section .content h1 {
        font-size: 28px;
        line-height: 35px;
    }
    .dw-hero-section .content p {
        font-size: 14px;
        line-height: 23px;
        margin-bottom: 0px;
    }
    .dw-hero-section .content a {
        font-size: 16px;
        padding: 10px 40px;
    }
    .dw-why-para {
        font-size: 14px;
        line-height: 24px;
    }
    .dw-donation-section h2.dw-heading {
        margin-bottom: 15px;
    }
    .dw-donation-section .image-wrapper img {
        height: 300px;
    }
    .dw-donation-section .content-wrapper li img {
        height: 25px;
        width: 25px;
    }
    .dw-donation-section .content-wrapper li span {
        font-size: 14px;
        line-height: 25px;
    }
    .dw-donation-section .content-wrapper li {
        margin-bottom: 15px;
    }
    .dw-wallet-section .image-wrapper img {
        height: 300px;
    }
    .dw-wallet-section .content-wrapper li img {
        height: 25px;
        width: 25px;
    }
    .dw-wallet-section .content-wrapper li span {
        font-size: 14px;
        line-height: 25px;
    }
    .dw-wallet-section .content-wrapper li {
        margin-bottom: 15px;
    }
    .dw-card-image-wrapper img {
        width: 60px;
        height: 60px;
    }
    .dw-card-image-wrapper{
        padding: 10px;
    }
    .dw-benefits-card{
        gap: 15px;
    }
    .dw-card-title {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 5px;
    }
    .dw-device-section {
        padding: 40px 0;
    }
    .dw-device-section .dw-heading {
        margin-bottom: 15px;
    }
    .dw-device-top-para {
        margin: 15px auto 15px auto;
        font-size: 14px;
        line-height: 24px;
    }
    .dw-device-section thead th {
        font-size: 18px;
        line-height: 20px;
        padding: 10px 10px 10px 10px;
    }
    .dw-device-section tbody tr td {
        font-size: 14px;
        line-height: 19px;
        padding: 10px 10px 10px 10px;
    }
    .dw-device-section thead th{
        width: 32%;
    }
    .dw-device-section thead th:first-child{
        width: 36%;
        min-width: 105px;
    }
    .dw-device-bottom-para {
        margin: 15px auto 0px auto;
        font-size: 14px;
        line-height: 24px;
    }
    .dw-support-row .left-col {
        padding: 40px 0 15px 0;
    }
    .dw-support-section .content-wrapper p {
        font-size: 14px;
        line-height: 24px;
    }
}